<template>
  <div class="oneMap">
    <GlobalMap />
    <StationPopup :stationData="stationData" />
    <OverlayPopup :stationData="state.pickFeatures" />
    <LeftCommon :isCollapse="state.isCollapse" />
    <StationSearch :mapStationData="mapStationData" top="10px" right="10px" />
    <div class="mapOperateWarp">
      <a-tooltip placement="right" color="#409fff">
        <!-- <template #title><span>全屏展示</span></template> -->
        <ul class="collapseWarp">
          <li v-show="state.isCollapse" @click="state.isCollapse = false"><img src="@/assets/images/collapse1.png" /></li>
          <li v-show="!state.isCollapse" @click="state.isCollapse = true"><img src="@/assets/images/collapse2.png" /></li>
        </ul>
      </a-tooltip>
      <a-tooltip placement="right" color="#409fff">
        <!-- <template #title><span>地图工具</span></template> -->
        <MapTool />
      </a-tooltip>
      <a-tooltip placement="right" color="#409fff">
        <!-- <template #title><span>地图底图</span></template> -->
        <MapType />
      </a-tooltip>
      <a-tooltip placement="right" color="#409fff">
        <!-- <template #title><span>图例展示</span></template> -->
        <Legend :data="legendData" @change-legend-data="changeLegendData" />
      </a-tooltip>
    </div>
    <WarningLevelLegend />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide, watch, onMounted } from 'vue';
  import { GlobalMap, getGlobalMap } from '@/components/GlobalMap';
  import LeftCommon from './left-common/index.vue';
  import StationPopup from '@/components/stationPopup';
  import OverlayPopup from '@/components/OverlayPopup';
  import StationSearch from '@/components/StationSearch';
  import { Legend } from '@/components/Legend';
  import MapTool from '@/components/MapTool';
  import MapType from '@/components/MapType';
  import WarningLevelLegend from '@/components/WarningLevelLegend';
  import { addMapData } from './globalMap-event/addMapData';
  import { useOlMapEvent } from './globalMap-event/useOlMapEvent';
  import { useStationDataStoreWithOut } from '@/store/modules/stationData';
  import { getPPAllData, getRRAllData } from '@/api/oneMap/baseData';

  import { PPIcon0,RRIcon, lakeIcon, ganquIcon, PPIcon, cunIcon, zhenIcon } from '@/setting/imageEnum';

  const stationData = ref(null);
  const legendUpdate = ref(null);
  const mapStationData = ref(null);
  const stationDataStore = useStationDataStoreWithOut();
  const state = reactive({
    globalMap: null,
    pickFeatures: null,
    isCollapse: false,
  });

  const legendData = [
    {
      title: '监测站点',
      data: [
        { icon: RRIcon, name: '水库站', type: 'RR', status: true },
        { icon: PPIcon, name: '雨量站', type: 'PP', status: true },
      ]
    },
    {
      title: "其他",
      data: [
        { icon: ganquIcon, name: '水系', type: 'water-LineStringLayer', status: true },
        { icon: lakeIcon, name: '水库湖泊', type: 'water-PolygonLayer', status: true },
        { icon: cunIcon, name: '村界', type: 'village', status: true },
        { icon: zhenIcon, name: '镇界', type: 'townBoundary', status: true },
        { icon: PPIcon0, name: '无数据', type: 'PP-PointLayer-Level1', status: true },
      ]
    },
  ];

  // 图例点击更新的数据
  const changeLegendData = (data) => {
    legendUpdate.value = data;
  }
  provide('LegendUpdateData', legendUpdate);

  // 监听侧边栏表格选择站点，地图点击站点，弹窗展示详情
  watch(
    () => stationDataStore.stationData,
    (val) => {
      stationData.value = val;
    }
  );

  onMounted(async () => {
    const allPPData = await getPPAllData();
    const allRRData = await getRRAllData();
    mapStationData.value = [...allPPData, ...allRRData];
    addMapData(allPPData, allRRData);
    state.globalMap = getGlobalMap();
    const { pickFeatures } = useOlMapEvent();
    state.pickFeatures = pickFeatures;
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .oneMap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .mapOperateWarp {
      position: absolute;
      right: 16px;
      bottom: 40px;
      z-index: 200;
      width: 50px;
      padding-left: 10px;
      display: grid;
      grid-row-gap: 10px;
      .collapseWarp, .viewer360, .inspectionVideo, .obliquePhotography {
        width: 40px;
        height: 40px;
        background: rgba(251, 252, 255, 1);
        box-shadow: 0px 4px 6px 0px #03225917;
        border-radius: 6px;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        &:hover, &:active {
          background: #e7f0ff;
          border: 1px solid #b6d8ff;
        }
        li {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 28px;
          }
        }
      }
      .collapseWarp {
        bottom: 200px;
        li img {
          width: 22px;
        }
      }
      .viewer360, .inspectionVideo, .obliquePhotography {
        img {
          width: 28px;
        }
      }
    }
  }
</style>
